<template>
	<view class="login">
		<view class="login-back">
			<text class="iconfont iconzuojiantou" @tap="backIndex">返回</text>
		</view>

		<view class="login-head"></view>

		<view class="login-form" v-if="loginType === 'phone'">
			<view class="form-head">密码登录</view>
			<view class="input-content">
				<view class="input-item">
					<text class="tit">手机号码</text>
					<input v-model="loginForm.phone" type="number" id="phone" data-type="phone" maxlength="11" placeholder="请输入手机号码" />
				</view>
				<view class="input-item">
					<text class="tit">密码</text>
					<input v-model="loginForm.password" type="password" id="password" data-type="password" maxlength="16" placeholder="请输入密码" />
				</view>
			</view>
			<view class="input-error">{{ errorText ? errorText : '' }}</view>
			<button class="confirm-btn" @tap="loginHandle">登录</button>
		</view>

		<view class="login-form" v-else>
			<view class="form-head">验证码登录</view>
			<view class="input-content">
				<view class="input-item">
					<text class="tit">手机号码</text>
					<input v-model="loginForm.phone" type="number" id="phone" data-type="phone" maxlength="11" placeholder="请输入手机号码" />
				</view>
				<view class="input-item">
					<text class="tit">验证码</text>
					<view class="code-view">
						<input v-model="loginForm.code" type="text" maxlength="6" placeholder="请输入验证码" />
						<button :disabled="countDown" @tap="sendCode">{{ sendCodeText }}</button>
					</view>
				</view>
			</view>
			<view class="input-error">{{ errorText ? errorText : '' }}</view>
			<button class="confirm-btn" @tap="loginHandle">登录</button>
		</view>

		<view class="login-type">
			<text class="iconfont iconyanzhengma" :class="{ active: loginType === 'code' }" @tap="changeLoginType('code')"></text>
			<text class="iconfont iconmima" :class="{ active: loginType === 'phone' }" @tap="changeLoginType('phone')"></text>
		</view>
	</view>
</template>

<script>
import { loginForPwd, sendCodeApi, loginForCode } from '@/common/api.js';
export default {
	data() {
		return {
			// 登录表单
			loginForm: {
				phone: '',
				password: '',
				code: ''
			},
			// 表单验证文字
			errorText: '',
			// 登录方式
			loginType: 'code',
			// 验证码文字
			sendCodeText: '发送验证码',
			// 倒计时
			countDown: false
		};
	},
	onLoad() {},
	methods: {
		/* 返回主页 */
		backIndex() {
			uni.navigateBack();
		},
		/* 登录按钮 */
		loginHandle() {
			let { phone, password, code } = this.loginForm;
			if (!phone) {
				return (this.errorText = '请填写手机号码');
			}
			let phoneReg = /^1[3-9]\d{9}$/;
			if (!phoneReg.test(phone)) {
				return (this.errorText = '手机号码格式不正确');
			}
			if (this.loginType === 'phone') {
				if (!password) {
					return (this.errorText = '请填写密码');
				}
				loginForPwd(phone, password).then(res => {
					this.toLogin(res);
				});
			} else {
				if (!code) {
					return (this.errorText = '请填写验证码');
				}
				loginForCode(phone, code).then(res => {
					this.toLogin(res);
				});
			}
		},
		/* 登录事件 */
		toLogin(res) {
			console.log(res);
			if (res.data.code !== 200) {
				uni.showToast({
					title: res.data.message
				});
			} else {
				// 用户账户
				uni.setStorage({
					key: 'userAccount',
					data: res.data.account
				});
				// 用户信息
				uni.setStorage({
					key: 'userInfo',
					data: res.data.profile
				});
				uni.navigateTo({
					url: '/pages/index/index'
				});
			}
		},
		/* 切换登录方式 */
		changeLoginType(type) {
			this.loginType = type;
			this.errorText = '';
		},
		/* 发送验证码 */
		sendCode() {
			this.countDown = true;
			let time = 60;
			let timer = setInterval(() => {
				this.sendCodeText = --time + '秒后重新获取';
				if (time === 0) {
					this.countDown = false;
					this.sendCodeText = '重新获取验证码';
					clearInterval(timer);
				}
			}, 1000);
			sendCodeApi(this.loginForm.phone).then(res => {
				if (res[1].data.code !== 200) {
					uni.showToast({
						title: res[1].data.errMsg
					});
				} else {
					console.log(res);
				}
			});
		}
	}
};
</script>

<style lang="scss">
.login-back {
	height: 80rpx;
	padding: 20rpx 0 0 20rpx;
}
.fixed-bg {
	// background-image: url('../../static/wangyiyunyinyue.png');
}

.login-head {
	height: 30vh;
	width: 100vw;
	border: 1px solid #eee;
}
.input-error {
	text-align: center;
	font-size: 28rpx;
	color: #d43c33;
}

.login-form {
	position: relative;
	z-index: 90;
	.form-head {
		position: relative;
		left: 50rpx;
		top: -90rpx;
		font-size: 46rpx;
		color: #555;
	}
	.input-content {
		padding: 0 60rpx;
	}
	.input-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-evenly;
		padding: 0 0 0 30rpx;
		background: #f8f6fc;
		height: 120rpx;
		border-radius: 4px;
		margin-bottom: 50rpx;
		.input-item:last-child {
			margin-bottom: 0;
		}
		.input-item .tit {
			height: 50rpx;
			line-height: 56rpx;
			font-size: 30rpx;
			color: #606266;
		}
		.input-item input {
			height: 60rpx;
			font-size: 30rpx;
			color: #303133;
			width: 100%;
		}
		.code-view {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			button {
				height: 60rpx;
				line-height: 60rpx;
				font-size: 30rpx;
				margin: 0;
				outline: none;
			}
			uni-button:after {
				border: 0;
			}
		}
	}

	.confirm-btn {
		width: 630rpx !important;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 50rpx;
		margin-top: 30rpx;
		background: #d43c33;
		color: #fff;
		font-size: 32rpx;
		padding: 0;
	}

	.confirm-btn2:after {
		border-radius: 100px;
	}
}

.login-type {
	width: 100vw;
	height: 150rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	text {
		margin: 0 20rpx;
		font-size: 50rpx;
	}
}

.active {
	color: #d43c33;
	font-weight: 600;
}
</style>
